<template>
  <div id="home">
    <div class="home_bg"></div>
    <!-- <div class="login_type">当前身份：<span>老师</span></div> -->
    <van-notice-bar
      @click="$router.push({path:'/notice', query: {text: noticeText}})"
      :text="noticeText"
      left-icon="volume-o"
    />
    <!-- <div class="gray_border"></div> -->
    <div class="menu_wrapper">
      <van-row class="menu_line" type="flex" justify="space-around">
        <van-col class="menu_item" span="8">
          <div class="item_" @click="navigateTo('/lessonTab')">
            <img src="../../assets/imgs/menu01.png" alt="">
            <p>课表</p>
          </div>
        </van-col>
        <van-col class="menu_item" span="8" v-if="userType==='老师'">
          <div class="item_" @click="navigateTo('/isAtLesson')">
            <img src="../../assets/imgs/menu02.png" alt="">
            <p>上课点名</p>
          </div>
        </van-col>
        <van-col class="menu_item" span="8" v-else>
          <div class="item_" @click="navigateTo('')">
            <img src="../../assets/imgs/menu05.png" alt="">
            <p>班级</p>
          </div>
        </van-col>
        <van-col class="menu_item" span="8">
          <div class="item_" @click="navigateTo('')">
            <img src="../../assets/imgs/menu03.png" alt="">
            <p>课堂点评</p>
          </div>
        </van-col>
      </van-row>

      <van-row class="menu_line" type="flex" justify="space-around">
        <van-col class="menu_item" span="8">
          <div class="item_" @click="navigateTo('')">
            <img src="../../assets/imgs/menu04.png" alt="">
            <p>统计</p>
          </div>
        </van-col>
        <van-col class="menu_item" v-if="userType==='老师'" span="8">
          <div class="item_" @click="navigateTo('')">
            <img src="../../assets/imgs/menu05.png" alt="">
            <p>班级</p>
          </div>
        </van-col>
        <van-col class="menu_item bg_none" v-else span="8"></van-col>
        <van-col class="menu_item bg_none" span="8">
        </van-col>
      </van-row>
    </div>
    <app-footer :index="0"></app-footer>
  </div>
</template>

<script>
import AppFooter from '@/components/AppFooter.vue'
import { Toast, NoticeBar } from 'vant'
import {getCookieStorage} from '@/assets/js/common.js'
export default {
  data () {
    return {
      // 公告
      noticeText: '',
      // 身份
      userType: ''
    }
  },
  mounted () {
    this.init()
    this.getNoticeText()
  },
  methods: {
    init () {
      let userType = getCookieStorage('userType')
      if (userType) {
        this.userType = userType
      } else {
        this.$router.push('/login')
      }
    },
    getNoticeText () {
      if (this.userType === '学生') {
        this.$api.post('/api/news/getStudentNews', {userId: getCookieStorage('userInfo').id}).then(res => {
          if (res.code === 0) {
            if (res.data && res.data.newsEntity) {
              this.noticeText = res.data.newsEntity.content
            }
          }
        })
      } else if (this.userType === '老师') {
        this.$api.post('/api/news/getTeacherNews', {userId: getCookieStorage('userInfo').id}).then(res => {
          console.log(res)
        })
      }
    },
    navigateTo (path) {
      if (path) {
        this.$router.push(path)
      } else {
        Toast({
          message: '暂未开放',
          position: 'bottom',
          duration: 2000
        })
      }
    }
  },
  components: {
    AppFooter,
    Toast,
    NoticeBar
  }
}
</script>

<style lang="scss" scoped>
#home {
  .home_bg {
    width: 100%;
    height: 2rem;
    background-image: url('../../assets/imgs/bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .login_type {
    height: .5rem;
    line-height: .5rem;
    padding-left: .12rem;
    background: #fff;
    span {
      color: orange;
    }
  }
  .gray_border {
    height: .1rem;
    background-color: #f8f8f8;
  }
  .menu_wrapper {
    padding: .12rem;
    .menu_line {
      margin-bottom: .08rem;
      &:last-child {
        margin-bottom: 0;
      }
      .menu_item {
        margin-right: .08rem;
        background: #fff;
        &:last-child {
          margin-right: 0;
        }
        &.bg_none {
          background: transparent;
        }
        .item_ {
          border: 1px solid #f9f9f9;
          img {
            display: block;
            width: .6rem;
            height: .6rem;
            margin: 0 auto;
            margin-top: .2rem;
          }
          p {
            text-align: center;
            color: #ccc;
            margin: 10;
          }
        }
      }
    }
  }
}
</style>
